<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>	
	</head>
	<body>
		<canvas id="mycanvas"></canvas>
	</body>
	<script>
			var obj=document.getElementById("mycanvas");
			var context=obj.getContext("2d");
			context.beginPath();//起始一条路径，或重置当前路径

			context.arc(100,80,50,0*Math.PI,2*Math.PI);//创建弧/曲线（用于创建圆形或部分圆）

			var gradient=context.createLinearGradient(0,0,0,120);//创建线性渐变（用在画布内容上）

			gradient.addColorStop(0,"red");//规定渐变对象中的颜色和停止位置

			gradient.addColorStop(0.5,"blue");
			gradient.addColorStop(1,"magenta");
			context.strokeStyle=gradient;//设置或返回用于笔触的颜色、渐变或模式

			context.lineWidth=5;//设置或返回当前的线条宽度

			context.stroke();//	绘制已定义的路径

		</script>
</html>
